<template>
	<div class="account_div">
		<div class="header_div">
			<p class="btn_back" @click="btn_back">返回</p>
			个人资料
		</div>
		<div class="avatar_div">
			<img src="../../assets/img/login_pic.png" alt="">
		</div>
		<div class="input_div">
			<p class="input_p">
				<span>昵称</span>
				<input type="text" name="" v-model="user_nick" placeholder="张三">
			</p>
			<div class="input_p" @click="btn_showSex">
				<span class="fl">性别</span>
				<span class="fr">男<span class="icon-arrbR"></span></span>
			</div>
			<mt-datetime-picker
			    ref="picker"
			    type="date"
			    v-model="pickerValue">
			</mt-datetime-picker>
			<mt-picker :slots="slots" @change="onValuesChange" v-if="showSex" @click="hideSex" ></mt-picker>
    
		  
		</div>
		<p class="btn_login" @click="btn_perSub">确定</p>
	</div>
</template>
<script>
	export default{
		name:'password',
		data(){
			return {
				user_nick:'',
				pickerVisible:'',
				showSex:false,
				pickerValue:'',
				value:'',  
				slots:[{values: ['男', '女']}]  
			}
		},
		components:{
            
        },
        methods:{
        	btn_back:function(){
				this.$router.go(-1);
			},
			btn_perSub:function(){

			},
			btn_showSex:function(){
				this.showSex = true;
			},
			onValuesChange(picker, values) {
				this.value = values[0];  
				console.log(values)
			},
			hideSex:function(){
				this.showSex = false;
			},
			openPicker() {
		        this.$refs.picker.open();
		    }
			
        },
        created() {  
			
	    },  
        mounted:function(){

        }
	}
</script>
<style rel="stylesheet" lang="scss" scoped>
	.account_div{
		.header_div{
			background-color: #FFF;
	    	color: #000;
		}
		.avatar_div{
			width: 2.2667rem;
			height: 2.2667rem;
			border-radius: 50%;
			margin: 0 auto;
			margin-top: 0.4rem;
		}
		.input_div .input_p{
			padding: 0;
			background-color: #FFF;
			.fr{
				left: inherit;
				right: 0.8rem;
			}
		}
	}
</style>